<div id="program_{{ program.id }}" data-cy="{{program.name}}" data-name="{{program.name}}" data-id="{{program.id}}" class="program w-full border-solid border-2 {% if program.submitted %} border-gray-400 bg-gray-400 {% else %} border-orange-400 {% endif %} rounded p-4 mb-4">
    <h3 id="submitted_header_{{ program.id }}" class="mt-0 mb-4 text-red-500 text-center {% if not program.submitted %} hidden{% endif %}">{{_('submitted_header')}}</h3>
    <div class="flex flex-row">
        <div class="flex flex-row flex-wrap justify-between">
            <div class="flex flex-col mb-4">
                <p class="w-32 text-blue-600">{{_('title')}}</p>
                <p class="mt-1">{{program.name|truncate(30)}}</p>
            </div>
            <div class="flex flex-col mb-4">
                <p class="w-32 text-blue-600 hover:bg-gray-300 active:bg-gray-400">{{_('level')}}</p>
                <p class="mt-1">{{_('level')}} {{ program.level }}</p>
            </div>
            <div class="flex flex-col mb-4">
                <p class="w-32 text-blue-600">{{_('adventure')}}</p>
                {% if program.adventure_name %}
                <p class="mt-1">{{adventure_names.get(program.adventure_name, program.adventure_name)}}</p>
                {% else %}
                <p class="mt-1">-</p>
                {% endif %}
            </div>
            <div class="flex flex-col mb-4">
                <p class="w-32 text-blue-600">{{_('number_lines')}}</p>
                <p class="mt-1">{{ program.number_lines }}</p>
            </div>
            <div class="flex flex-col mb-4">
                <p class="w-32 text-blue-600">{{_('last_edited')}}</p>
                <p class="mt-1">{{_('ago')|replace("{timestamp}", program.date)}}</p>
            </div>
        </div>
        {% if public_profile and not second_teachers_programs %}
            {% set favourite_program = public_profile.favourite_program == program.id %}
            <div
                id="favourite_program_container_{{ program.id }}"
                data-cy="favourite_program_container_{{ program.id }}"
                data-starred="{{favourite_program}}"
                class="ml-auto mb-10 favourite_program_container {% if favourite_program %}text-yellow-400{% else %}text-white{% endif %} text-2xl{% if not program.public %} hidden{% endif %}">
                <i class="fa fa-star p-4 bg-blue-300 rounded-full cursor-pointer hover:bg-blue-600"
                    onclick="hedyApp.set_favourite_program('{{ program.id }}', '{{_('favourite_confirm')}}', '{{_('unfavourite_confirm')}}');" aria-hidden="true"></i>
            </div>
        {% endif %}
        {% if not graph_view %}
          <div class="ml-auto dropdown relative">
            <button class="gray-btn text-gray-500 border border-gray-600 font-semibold rounded inline-flex items-center gap-2" data-cy="more_options_{{ program.id }}"
              onclick="$('#program_options_dropdown_{{ program.id }}').slideToggle('medium');">
              <span>{{_('more_options')}}</span>
            </button>
            <div class="dropdown-menu z-30 min-w-full" id="program_options_dropdown_{{ program.id }}" data-cy="program_options_dropdown_{{ program.id }}"
              style="display: none; padding: 0px !important; margin: 0px; margin-top: 0.25rem;">
                <button class="gray-btn text-blue-500 min-w-full flex justify-between items-center gap-2 border-b border-gray-500" onclick="hedyApp.copy_to_clipboard(`{{program.code}}`, '{{_('copy_clipboard')}}')">{{_('copy_code')}}</button>
                {% if program.public %}
                    <button class="gray-btn text-blue-500 min-w-full flex justify-between items-center gap-2 border-b border-gray-500" onclick="hedyApp.copy_to_clipboard(hedyApp.viewProgramLink('{{program.id}}'), '{{_('copy_clipboard')}}')">{{_('copy_link_to_share')}}</button>
                {% endif %}
                {% if not second_teachers_programs %}
                    {% if not program.submitted %}
                    <button class="gray-btn text-red-500 min-w-full flex justify-between items-center gap-2" data-cy="delete_non_submitted_program_{{ program.id }}" onclick="hedyApp.delete_program('{{ program.id }}', '{{_('delete_confirm')}}')">{{_('delete')}}</button>
                    {% else %}
                        <button class="gray-btn text-red-500 min-w-full flex justify-between items-center gap-2" data-cy="delete_submitted_program_{{ program.id }}" onclick="hedyApp.delete_program('{{ program.id }}', '{{_('delete_confirm')}}')">{{_('delete')}}</button>
                    {% endif %}
                {% endif %}
            </div>
          </div>
        {% endif %}
    </div>
    <div class="w-3/4 turn-pre-into-ace mb-4">
      <pre level="{{ program.level }}" class="text-sm">{{program.preview_code }}</pre>
    </div>
    <div id="submitted_button_container_{{ program.id }}" class="flex flex-row gap-2" {% if not program.submitted %} style="display: none;" {% endif %}>
        <button class="blue-btn" onclick="window.open (hedyApp.viewProgramLink('{{program.id}}'))">{{_('open')}}</button>
    </div>
    <div id="non_submitted_button_container_{{ program.id }}" data-cy="non_submitted_button_container_{{ program.id }}" class="flex flex-row w-full gap-2 {% if program.submitted %} hidden {% endif %}">
        <a href="/hedy/{{program.level|string}}/{{program.id}}" target="_blank"><button class="blue-btn">{{_('open')}}</button></a>
        {% if not graph_view %}
            <button class="green-btn" data-cy="submit_btn_{{ program.id }}" {% if not program.public or second_teachers_programs %} style="display: none;" {% endif %} onclick="hedyApp.modal.confirm ('{{_('submit_warning')}}', function () {hedyApp.submit_program ('{{program.id}}')})">{{_('submit_program')}}</button>
            {% if not second_teachers_programs %}
            <div class="dropdown relative">
                <button class="white-btn inline-flex items-center gap-2" data-cy="share_option_dropdown_{{ program.id }}"
                onclick="$('#share_dropdown_{{ program.id }}').slideToggle('medium');">
                <span class="fa fa-{% if program.public %}globe{% else %}lock{% endif %}"></span>
                <span>{% if program.public %}{{_('public')}}{% else %}{{_('private')}}{% endif %}</span>
                <svg id="share_arrow_{{ program.id }}" class="fill-current h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
                </svg>
                </button>
                <div class="dropdown-menu z-30 min-w-full" id="share_dropdown_{{ program.id }}"
                style="display: none; padding: 0px !important; margin: 0px; margin-top: 0.25rem;"
                _="on mutation of @style
                    set arrow to #share_arrow_{{ program.id }}
                    if *display == 'none'
                        remove .rotate-180 from arrow
                    else if not arrow.classList.contains('rotate-180')
                        add .rotate-180 to arrow
                    end">
                    <button data-cy="share_button_{{ program.id }}" class="gray-btn text-blue-500 min-w-full inline-flex items-center gap-2"
                    hx-post="/programs/share/{{program.id}}/{{second_teachers_programs}}"
                    data-cy="unshare_program_{{ program.id }}"
                    hx-swap="outerHTML"
                    hx-target="#program_{{ program.id }}"
                    >
                    <span class="fa fa-{% if program.public %}lock{% else %}globe{% endif %}"></span>
                    <div class="mr-auto" tabindex=0>
                        {% if program.public %}{{_('private')}}{% else %}{{_('public')}}{% endif %}
                    </div>
                    </button>
                </div>
            </div>
            {% endif %}
        {% endif %}
    </div>
</div>
